<template>
	<div id="search" class="search">
		<x-header :left-options="{backText: ''}" title="slot:overwrite-title">
			<div class="overwrite-title-demo" slot="overwrite-title">
				<Search cancel-text='' @on-submit="onSubmit" :auto-fixed="false" v-model="value" @on-focus="onFocus" @on-cancel="onCancel"></Search>
			</div>
		</x-header>

		<group title="会员" class="searchResult">
			<cell v-for="item in items" v-if="item.status == 1" :title="item.name" @click.native="jumpTo(item.id)">
				<img slot="icon" width="50" style="display:block;margin-right:5px;" src="../../../assets/profile/default_header.svg">
			</cell>
		</group>

		<group title="准会员" class="searchResult">
			<cell v-for="item in items" v-if="item.status == 0" :title="item.name" @click.native="jumpTo(item.id)">
				<img slot="icon" width="50" style="display:block;margin-right:5px;" src="../../../assets/profile/default_header.svg">
			</cell>
		</group>

		<group title="原始单" class="searchResult">
			<cell v-for="item in items" v-if="item.status == 8" :title="item.name" @click.native="jumpTo(item.id)">
				<img slot="icon" width="50" style="display:block;margin-right:5px;" src="../../../assets/profile/default_header.svg">
			</cell>
		</group>

		<div class="error" v-show="error">{{error}}</div>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import Networking from '../../../utils/networking'
	import {Search, Group, Cell, XButton, XHeader} from 'vux'
	export default {
		name: "search",
		components: {
			Cell,
			Search,
			Group,
			XButton,
			XHeader
		},
		beforeRouteLeave(to, from, next){
			//存储当前页面信息
			this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: this.value})
			next()
		},
		created: function() {
			bus.$emit('barController',9)

			if(!this.$route.params.clearSearch && this.$store.state.user.urlParamsMap != null && this.$store.state.user.urlParamsMap["search"] != null){
				if(this.$store.state.user.urlParamsMap["search"].params != null){
					this.value = this.$store.state.user.urlParamsMap["search"].params
					if(this.value != ""){
						this.onSubmit(this.value)
					}
				}
			}
		},
		methods: {
			onSubmit (val) {
				this.error = ''

				let _this = this
				Networking.doGet(
					'customers/searchCustomer',
					null,
					{
						params: {
							name: val
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							if(rs.customer_list.length > 0){
								_this.items = rs.customer_list
							}else{
								_this.items = rs.customer_list
								_this.error =  '没有你要搜索的结果，请重新搜索'
							}
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			onCancel () {
				console.log('on cancel')
			},
			onFocus () {
				console.log('on focus')
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: 'customerDetails', params: { id: id }})
			}
		},
		data () {
			return {
				items: [],
				autoFixed: false,
				value: '',
				error: ''
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.search {
		margin-top: 0px;
	}
	.searchResult > .weui-cells > .weui-cell{
		padding: 0px 15px;
	}

	.search > .vux-header {
		background-color: white !important;
	}

	.search > .vux-header > .vux-header-title-area {
		margin: 0 40px !important;
		width: 90% !important;
	}

	.vux-search-box {
		margin-top: 5px !important;
	}

	.weui-search-bar:before {
		border-top: 0px solid #D7D6DC !important;
	}

	.weui-search-bar {
		padding: 3px 0px !important;
		background-color: white !important;
	}

	.weui-search-bar__form {
		background-color: white !important;
	}

	.weui-search-bar__form:after{
		border: 0px solid white !important;
	}

	.weui-search-bar__cancel-btn {
		text-decoration: none !important;
		margin-right: 10px !important;
	}

	.vux-header .vux-header-left .left-arrow{
		top: 0px;
		left: 0px;
	}

	.vux-header .vux-header-left .left-arrow:before {
		border: 1px solid black;
		border-width: 1px 0 0 1px;
		transform: rotate(315deg);
	}

	.weui-search-bar:after {
		border-bottom: 1px solid #44abe2 !important;
	}

</style>